
<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link rel="stylesheet" href="<%=basePath%>/static/login/css/simpleAlert.css">
    <script src="<%=basePath%>/static/login/js/simpleAlert.js"></script>
    <link href="/static/moban1/css/style1.css" rel="stylesheet" type="text/css" />

    <style type="text/css">

        /*使用模式*/
        .fp-rsch { margin-left: 5px; width: 160px; }
        .fp-date-text { font-weight: bold; margin: 1px 3px 1px 1px; padding: 6px 3px; color: #fff; }
        /*.fp-time-start, .fp-time-end {width:50px;}#f3f3f3
        background: #00FF00 url('static/xcus/a/theme/images/zaowei.jpg') no-repeat fixed top width:100px height:100px;
        */
        .fp-dot { border-radius: 50%; border: 1px solid #ccc; text-align: center; font-size: 12px; color: #fff; /*box-shadow: 0 0 2px 1px #ccc;*/ }
        .fp-dot1
        {
            margin-top:0px;
            text-align:center;
            font-size: 12px;
            border-left:3px solid gray ;
            border-right:1px dotted gray ;
            border-top:5px solid gray ;
            border-bottom:5px solid gray ;
            width:60px;
            height:50px;

        }
        .fp-dot2{
            margin-top:0px;
            text-align:center;
            font-size: 12px;
            border-left:1px dotted gray ;
            border-right:4px solid gray ;
            border-top:5px solid gray ;
            border-bottom:5px solid gray ;
            width:60px;
            height:50px;

        }
        .fp-p{

            width:456px;
            height:5px;
        }
        .fp-p1{

            width:516px;
            height:5px;
        }
        .fp-pp{

            width:50px;
            height:40px;
        }

        .fp-pp{

            width:120px;
            height:40px;
        }


        .fp_content .fp-dot { cursor: pointer; opacity: .95; }
        .fp_content .fp-dot:hover { box-shadow: 0 0 2px 1px #ccc; opacity: 1; }
        .fp-dot-ing { border: 1px solid red; box-shadow: 0 0 2px 1px red; }
        .fp-dot-ok { background: #FBFFE9; }
        .fp-dot-ok1 { background: #FBFFE9; }
        .fp_content .fp-dot-ok:hover { border-color: #FBFFE9; }
        .fp-dot-doing { background:orange ; }
        .fp_content .fp-dot-doing:hover { border-color: #bbb; }
        .fp-dot-busy { background: orange; }
        .fp_content .fp-dot-busy:hover { border-color: orange; }
        .fp-dot-close { background: #aaa; }
        .fp_content .fp-dot-close { cursor: default; opacity: 1; }
        .fp-user-search { margin: 0 5px;}
        .fp-load-status { display:inline-block;width:50px;margin-left:3px;}
    </style>


</head>
<body>
<%--<script type="text/javascript" src="bootstrap-datetimepicker.de.js" charset="UTF-8"></script>--%>

    <script>
        var uni_calendar_dft_opt = {
            byType: ("0" == "1" && (parseInt(pro.acc.ident) & 512) > 0) ? "volume" : "devcls"};
    </script>
    <form name="ctl00" method="post" action="roomdetail.jsp?classKind=8&amp;roomId=100458567&amp;roomName=4-C%u533a" id="ctl00">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJNDAyOTc5OTEwZGS0UGSvocQlTi8lRRvSx2yeWJxQLQ==" />
</div>

<div>

	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwKJ/K+IDQKKgKPpBQLk9MrjA8QajnF+phFHRHpnDXbGwY61xKNj" />
</div>
        <input name="roomId" type="hidden" id="roomId" class="room_id" value="100458567" />
        <input name="roomName" type="hidden" id="roomName" class="room_name" value="1-B区" />
    </form>
    <div>
        <div>
            <h1 class="h_title">A-1区</h1>
            <div id="contentInfo" style="margin:10px;margin-bottom:20px;overflow:hidden;">


            </div>
        </div>
        <div  id="infoUnitab" class="info_unitab">
            <ul class="tab_head" id="tab_haed">
                <li id="1">
                    <div class="title">预约状态</div>
                   <%-- <div class="caret"></div>--%>
                </li>
                <li id="2">
                    <div class="title">预约须知</div>
                   <%-- <div class="caret"></div>--%>
                </li>
             <%--   <li id="3">
                    <div class="title">硬件配置</div>
                   &lt;%&ndash; <div class="caret"></div>&ndash;%&gt;
                </li>
                <li id="4">
                    <div class="title">相册展示</div>
                    &lt;%&ndash;<div class="caret"></div>&ndash;%&gt;
                </li>--%>
            </ul>














            <%--<div class="tab_con">--%>
             <%--   <div class="cld-obj-detail">
                        




                </div>
                                <div>
                    
                </div>
                <div>
                    
                </div>--%>
         <%--   <div class="rm_album">
                <div class="img_large">
                    
                </div>
                <div class="img_thumb">
                    <ul class="clear">
                        
                    </ul>
                </div>
            </div>
                <script>
                    $(".rm_album").album();
                </script>
            </div>--%>
        </div>
    </div>
<script>

    $(function () {
        var obj_lis = document.getElementById("tab_haed").getElementsByTagName("li");
       /* for(var j=0;j<obj_lis.length;j++){
            alert(j)
            alert( obj_lis[j].innerHTML)
        }*/
        //for(var i=0;i<obj_lis.length;i++){
        obj_lis[0].onclick = function(){

            // $('#xuzhi').css('display','none');
            $('#yuyueid').css('display','block');
            $('#xuzhi').css('display','none');
            $('#xuzhi').removeClass();
            alert("load");
            $.ajax({
                type: "post",
                url: "<%=basePath%>/admin/selectAll",
                dataType: "json",

                success: function(data,statusTxt,xhr){
                    $.each(data, function(i,item){
                        var arr=new Array();
                        arr=item.split('|')
                        var idstr="#"+arr[0];
                       if(arr[1] =="02"){
                           $(idstr).css({"background":"orange"});
                       }else if(arr[1] =="03"){
                           $(idstr).css({"background":"gray"});
                       }

                    });

                },
                error:function(xhr,textStatus){
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete:function(){
                    console.log('结束')
                }
            });


        };
        obj_lis[1].onclick = function(){
                  //$('#xuzhi').css('display','none');
            $('#xuzhi').css('display','block');
            $('#yuyueid').removeClass();
            $('#yuyueid').css('display','none');

        };
           /* obj_lis[2].onclick = function(){
                $('#yuyueid').css('display','none');
            };
            obj_lis[3].onclick = function(){
                $('#yuyueid').css('display','none');
            };*/

       // }

       /*
        if(this.innerHTML.indexOf("预约状态")){
                    alert("出来");

                }else if(this.innerHTML.indexOf("硬件配置")){
                    alert("进来")
                    $('#yuyueid').css('display','none');
                }


       $('#infoUnitab ul li').click(function () {
           var vv= $('#infoUnitab ul li div').val();
           alert(vv);
            var idvalue=$('#infoUnitab ul li').attr("id");
            alert(typeof idvalue);
           // now=$(this).index();
            alert("+++",idvalue);
            console.log(idvalue);
           // tab();
        });*/
        /*function tab() {
            $("#tab ol li").eq(now).addClass('active').siblings().removeClass('active');
            $("#tab ul li").eq(now).addClass('cur').siblings().removeClass('cur');
        }*/
    });



</script>

    <div class="fp-qzone" tabindex="0" onselectstart="return false" id="huodongqu" >



        <div id="xuzhi" style="display: none">
            <div class="servicesPop">

                <div id="serFocus">

                    <div class="fr" style="position:relative;"><a href="javascript:void(0)" class="close" onclick="closeSerPop()">&nbsp;</a></div>

                    <div class="box" id="flash1">
                        <div class="servicesTxt" style="padding-left:85px;">
                            <div class="serTit" style="padding-top:15px;">
                                <span class="black font18">网站设计解决方案</span>
                                <br />
                                <span class="font16">Web and network solutions</span>
                            </div>
                            <p>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案，有效提升企业形象及品牌的知名度。从产品交互原型设计、视觉设计、HTML5页面开发、功能定制开发等高品质、一体化流程的网站建设服务。</p>
                            <div class="cl"><a href="http://sc.chinaz.com/" class="yidongBt white">网站设计套餐</a></div>
                        </div>
                    </div>

                    <div class="box" id="flash2">
                        <div class="servicesTxt" style="padding-left:85px;">
                            <div class="serTit" style="padding-top:15px;">
                                <span class="black font18">网站设计解决方案</span>
                                <br />
                                <span class="font16">Web and network solutions</span>
                            </div>
                            <p>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案，有效提升企业形象及品牌的知名度。从产品交互原型设计、视觉设计、HTML5页面开发、功能定制开发等高品质、一体化流程的网站建设服务。</p>
                            <div class="cl"><a href="http://sc.chinaz.com/" class="yidongBt white">网站设计套餐</a></div>
                        </div>

                    </div>

                    <div class="box" id="flash3">

                        <div class="servicesCon">
                            <div class="serTit">
                                <span class="black font18">移动应用产品解决方案</span>
                                <br />
                                <span class="font16">Mobile app solutions</span>
                            </div>
                            <div class="cl"><span class="Apple">IOS</span><span class="Android">Android</span><span class="Win8">Windows Phone 8</span></div>
                            <ul>
                                <li>iPhone/Android/Win8 APP交互设计 视觉设计 功能定制开发 基于HTML5开发的网页APP</li>
                                <li>iPad/iPad Retina/iPad Mini/Android/Win8 APP交互设计 视觉设计 功能定制开发</li>
                            </ul>
                            <div class="cl"><a href="http://sc.chinaz.com/" class="yidongBt white">移动应用案例</a></div>
                        </div>
                    </div>

                </div>

                <div class="flash_bar">
                    <span class="no" id="f1" onclick="changeflash(1)"></span>
                    <span class="no" id="f2" onclick="changeflash(2)"></span>
                    <span class="no" id="f3" onclick="changeflash(3)"></span>
                </div>

            </div>


            <div id="servicesBox">

                <div id="serBox1" class="serBox" onclick="serFocus(1)">
                    <div class="serBoxOn"></div>
                    <div class="pic1 mypng"><img src="/static/img/ser_box2.png" /></div>
                    <div class="pic2 mypng"><img src="/static/img/ser_box2b.png" /></div>
                    <div class="txt1"><span class="tit">洗澡好处</span>洗澡的好处还真不少。消除疲劳，舒筋活血，改善睡眠，提高皮肤的代谢功能和抗病力，而且通过温水的浸泡...</div>
                    <div class="txt2"><span class="tit">洗浴好处</span>洗澡的好处还真不少。消除疲劳，舒筋活血，改善睡眠，提高皮肤的代谢功能和抗病力，而且通过温水的浸泡...</div>
                </div>

                <div class="fgH20"></div>

                <div id="serBox2" class="serBox" onclick="serFocus(2)">
                    <div class="serBoxOn"></div>
                    <div class="pic1 mypng"><img src="/static/img/ser_box3.png" /></div>
                    <div class="pic2 mypng"><img src="/static/img/ser_box3b.png" /></div>
                    <div class="txt1"><span class="tit">网站设计解决方案</span>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案</div>
                    <div class="txt2"><span class="tit">网站设计解决方案</span>根据用户的需求、市场状况、企业情况等进行综合分析可用性的Web解决方案</div>
                </div>

                <div class="fgH20"></div>

               <%-- <div id="serBox3" class="serBox" onclick="serFocus(3)">
                    <div class="serBoxOn"></div>
                    <div class="pic1 mypng"><img src="images/ser_box1.png" /></div>
                    <div class="pic2 mypng"><img src="images/ser_box1b.png" /></div>
                    <div class="txt1"><span class="tit">移动应用产品解决方案</span>iOS/Android/Win8 APP交互设计、视觉设计、HTML5开发、功能定制开发</div>
                    <div class="txt2"><span class="tit">移动应用产品解决方案</span>iOS/Android/Win8 APP交互设计、视觉设计、HTML5开发、功能定制开发</div>
                </div>--%>

            </div>

        </div>




    <%--<img src="../../upload/DevImg/FloorPlan/rm100458563.jpg" style="width:100%;height:100%;">--%>

                    <div id="yuyueid" style="display:none;" >

                        <div class="fp-header">
                            <div class="fp-edit fp-edit-panel" style="display:none;">
                                <select class="fp-unit">
                                    <option value="14">14</option>
                                    <option value="16">16</option>
                                    <option value="20" selected="">20</option>
                                    <option value="24">24</option>
                                    <option value="28">28</option>
                                </select>
                                <select class="fp-objs">
                                    <option value="100458584" class="fp-obj-do">1.4-A001</option>
                                    <option value="100458585" class="fp-obj-do">2.4-A002</option>
                                    <option value="100458586" class="fp-obj-do">3.4-A003</option>
                                    <option value="100458587" class="fp-obj-do">4.4-A004</option>
                                    <option value="100458588" class="fp-obj-do">5.4-A005</option>
                                </select>
                            </div>


                            <div class="fp-user fp-user-panel">
            <span class="fp-date-panel">
                <span class="fp-date-text">选择时间:</span>
             <input type="text" class="hasDatepicker1" style="width:120px;"  value="2018-04-20 00:00" readonly="readonly" id="hasDatepicker1">

                --<input type="text" class="hasDatepicker2" style="width:120px;"  value="2018-04-20 00:00"  readonly="readonly" id="hasDatepicker2">

            </span>
                                <input type="button" class="fp-user-search btn btn-warning btn-sm" value="刷新" style="display:none;">
                                <span class="fp-load-status">
                <span class="load" style="display: none;">Loading</span>
            </span>
                                <span>
                <span class="fp-dot fp-dot-ok fp-dot-tip"></span>空闲&nbsp;
            <span class="fp-dot fp-dot-doing fp-dot-tip" style="position:relative;">
              <%--  <div class="fp-dot-layer fp-layer-0"></div>
                <div class="fp-dot-layer fp-layer-1"></div>--%>
            </span>

                忙碌&nbsp;<span class="fp-dot fp-dot-close fp-dot-tip"></span>
                不开放&nbsp;</span>
                                <select class="fp-rsch"><option value="0">---查找---</option><option value="100458584">4-A001</option></select></div>


                        </div>

                        <div  class="fp_content fp-show-guides fp-hide-obj-title" style="position: relative; height: 550px; width: 840px;">
                            <%--   <div class="fp-guides">
                                   <table class="fp-guides-tbl">
                                       <tbody>

                                       </tbody>
                                   </table>
                               </div>--%>

                            <div id="waiquan" class="fp-user fp-edit-con">
                                <p class="fp-p" style="position:absolute;line-height:20px;top:15px;left:144px;background: gray;"></p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:100px;left:184px;font-size:1.4em">过道</p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:220px;left:184px;font-size:1.4em">过道</p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:340px;left:184px;font-size:1.4em">过道</p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:100px;left:424px;font-size:1.4em">过道</p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:220px;left:424px;font-size:1.4em">过道</p>
                                <p class="fp-pp" style="position:absolute;line-height:20px;top:340px;left:424px;font-size:1.4em">过道</p>
                                <p class="fp-pp1" style="position:absolute;line-height:20px;top:60px;left:664px;font-size:1.6em">西区男：A1区</p>
                                <div class="fp-dot1" id="101" key="1" title="你好" style="position:absolute;line-height:20px;top:15px;left:84px;background: #FBFFE9;"  data-original-title="4-A001">
                                    101
                                </div>

                                <div class="fp-dot1" id="102" key="2" title="你好" style="position:absolute;line-height:20px;top:65px;left:84px;background: #FBFFE9;" data-original-title="4-A002">
                                    102
                                </div>

                                <div class="fp-dot1" id="103" key="1" title="你好" style="position:absolute;line-height:20px;top:115px;left:84px;background: #FBFFE9;"  data-original-title="4-A001">
                                    103
                                </div>

                                <div class="fp-dot1" id="104" key="2" title="你好" style="position:absolute;line-height:20px;top:165px;left:84px;background: #FBFFE9;" data-original-title="4-A002">
                                    104
                                </div>

                                <div class="fp-dot1" id="105" key="1" title="你好" style="position:absolute;line-height:20px;top:215px;left:84px;background: #FBFFE9;"  data-original-title="4-A001">
                                    105
                                </div>

                                <div class="fp-dot1" id="106" key="2" title="你好" style="position:absolute;line-height:20px;top:265px;left:84px;background: #FBFFE9;" data-original-title="4-A002">
                                    106
                                </div>

                                <div class="fp-dot1" id="107" key="1" title="你好" style="position:absolute;line-height:20px;top:315px;left:84px;background: #FBFFE9;"  data-original-title="4-A001">
                                    107
                                </div>

                                <div class="fp-dot1" id="108" key="2" title="你好" style="position:absolute;line-height:20px;top:365px;left:84px;background: #FBFFE9;" data-original-title="4-A002">
                                    108
                                </div>

                                <div class="fp-dot1" id="109" key="1" title="你好" style="position:absolute;line-height:20px;top:415px;left:84px;background: #FBFFE9;"  data-original-title="4-A001">
                                    109
                                </div>

                                <div class="fp-dot1" id="110" key="2" title="你好" style="position:absolute;line-height:20px;top:465px;left:84px;background: #FBFFE9;" data-original-title="4-A002">
                                    110
                                </div>

                                <div class="fp-dot2" id="111" key="1" title="你好" style="position:absolute;line-height:20px;top:15px;left:300px;background: #FBFFE9;"  data-original-title="4-A001">
                                    111
                                </div>

                                <div class="fp-dot2" id="112" key="2" title="你好" style="position:absolute;line-height:20px;top:65px;left:300px;background: #FBFFE9;" data-original-title="4-A002">
                                    112
                                </div>

                                <div class="fp-dot2" id="113" key="1" title="你好" style="position:absolute;line-height:20px;top:115px;left:300px;background: #FBFFE9;"  data-original-title="4-A001">
                                    113
                                </div>

                                <div class="fp-dot2" id="114" key="2" title="你好" style="position:absolute;line-height:20px;top:165px;left:300px;background: #FBFFE9;" data-original-title="4-A002">
                                    114
                                </div>
                                <div class="fp-dot2" id="115" key="2" title="你好" style="position:absolute;line-height:20px;top:265px;left:300px;background: #FBFFE9;" data-original-title="4-A002">
                                    115
                                </div>

                                <div class="fp-dot2" id="116" key="1" title="你好" style="position:absolute;line-height:20px;top:315px;left:300px;background: #FBFFE9;"  data-original-title="4-A001">
                                    116
                                </div>

                                <div class="fp-dot2" id="117" key="2" title="你好" style="position:absolute;line-height:20px;top:365px;left:300px;background: #FBFFE9;" data-original-title="4-A002">
                                    017
                                </div>

                                <div class="fp-dot2" id="118" key="1" title="你好" style="position:absolute;line-height:20px;top:415px;left:300px;background: #FBFFE9;"  data-original-title="4-A001">
                                    108
                                </div>

                                <div class="fp-dot2" id="119" key="2" title="你好" style="position:absolute;line-height:20px;top:465px;left:300px;background: #FBFFE9;" data-original-title="4-A002">
                                    119
                                </div>

                                <div class="fp-dot2" id="120" key="1" title="你好" style="position:absolute;line-height:20px;top:15px;left:540px;background: #FBFFE9;"  data-original-title="4-A001">
                                    120
                                </div>

                                <div class="fp-dot2" id="121" key="2" title="你好" style="position:absolute;line-height:20px;top:65px;left:540px;background: #FBFFE9;" data-original-title="4-A002">
                                    121
                                </div>

                                <div class="fp-dot2" id="122" key="1" title="你好" style="position:absolute;line-height:20px;top:115px;left:540px;background: #FBFFE9;"  data-original-title="4-A001">
                                    122
                                </div>

                                <div class="fp-dot2" id="123" key="2" title="你好" style="position:absolute;line-height:20px;top:165px;left:540px;background: #FBFFE9;" data-original-title="4-A002">
                                    123
                                </div>

                                <div class="fp-dot2" id="124" key="2" title="你好" style="position:absolute;line-height:20px;top:265px;left:540px;background: #FBFFE9;" data-original-title="4-A002">
                                    124
                                </div>

                                <div class="fp-dot2" id="125" key="1" title="你好" style="position:absolute;line-height:20px;top:315px;left:540px;background: #FBFFE9;"  data-original-title="4-A001">
                                    125
                                </div>

                                <div class="fp-dot2" id="126" key="2" title="你好" style="position:absolute;line-height:20px;top:365px;left:540px;background: #FBFFE9;" data-original-title="4-A002">
                                    126
                                </div>

                                <div class="fp-dot2" id="127" key="1" title="你好" style="position:absolute;line-height:20px;top:415px;left:540px;background: #FBFFE9;"  data-original-title="4-A001">
                                    127
                                </div>
                                <div class="fp-dot2" id="128" key="2" title="你好" style="position:absolute;line-height:20px;top:465px;left:540px;background: #FBFFE9;" data-original-title="4-A002">
                                    128
                                </div>
                                <p class="fp-p1" style="position:absolute;line-height:20px;top:515px;left:84px;background: gray;"></p>
                            </div>
                        </div>


                    </div>

    </div>
















</div>


<script type="text/javascript">
    $(document).ready(function(){

        $(".serBox").hover(function(){
            $(this).children().stop(false,true);
            $(this).children(".serBoxOn").fadeIn("slow");
            $(this).children(".pic1").animate({right: -110},400);
            $(this).children(".pic2").animate({left: 105},400);
            $(this).children(".txt1").animate({left: -240},400);
            $(this).children(".txt2").animate({right: 40},400);
        },function(){
            $(this).children().stop(false,true);
            $(this).children(".serBoxOn").fadeOut("slow");
            $(this).children(".pic1").animate({right:105},400);
            $(this).children(".pic2").animate({left: -110},400);
            $(this).children(".txt1").animate({left: 40},400);
            $(this).children(".txt2").animate({right: -240},400);
        });

    });

    function serFocus(i){
        $(".servicesPop").slideDown("normal");
        changeflash(i);
    }
    function closeSerPop(){
        $(".servicesPop").slideUp("fast");
    }

    var currentindex=1;
    function changeflash(i){
        currentindex=i;
        for (j=1;j<=6;j++){
            if(j==i){
                $("#flash"+j).fadeIn("normal");
                $("#flash"+j).css("display","block");
                $("#f"+j).removeClass();
                $("#f"+j).addClass("dq");
            }else{
                $("#flash"+j).css("display","none");
                $("#f"+j).removeClass();
                $("#f"+j).addClass("no");
            }
        }
    }


</script>


<%--<script>
//    var myDate = new Date();
//    $('#datetimepicker').datetimepicker('setStartDate',myDate);
    $('#datetimepicker1').datetimepicker();
    $('#datetimepicker2').datetimepicker();
</script>--%>
<script type="text/javascript">
    function p(s) {
        return s < 10 ? '0' + s: s;
    }

    var myDate = new Date();
    //获取当前年
    var year=myDate.getFullYear();
    //获取当前月
    var month=myDate.getMonth()+1;
    //获取当前日
    var date=myDate.getDate();
    var h=myDate.getHours();       //获取当前小时数(0-23)
    var m=myDate.getMinutes();     //获取当前分钟数(0-59)
    var s=myDate.getSeconds();
    var now=year+'-'+p(month)+"-"+p(date)+" "+p(h)+':'+p(m);

    var startt=year+'-'+p(month)+"-"+p(date)+" "+"16"+':'+"00"+':'+"00";
    var startt1=year+'-'+p(month)+"-"+p(date)+" "+"21"+':'+"00"+':'+"00";
    $("#hasDatepicker1").val(now);
    $("#hasDatepicker2").val(now);
    $("#hasDatepicker1").datetimepicker(
        /*{format: 'yyyy-mm-dd hh:ii',minView:1}*/
        {
            minView: 0,           //设置时间选择为年月日 去掉时分秒选择
            maxView: 0,
            format:'hh:ii',
            todayBtn:  0,
            autoclose: true,
            todayHighlight: false,
            startView: 0,
            minute:5,
            minuteStep:10,
            startDate:new Date(startt),  //只显示一年的日期365天
            endDate : new Date(startt1)
        }
    ).on('click',function(e){
        $("#hasDatepicker1").datetimepicker("setEndDate", $("#hasDatepicker2").val());
    });;

    $("#hasDatepicker2").datetimepicker(
        /*{format: 'yyyy-mm-dd hh:ii',minView:1}*/
        {
            minView: 0,           //设置时间选择为年月日 去掉时分秒选择
            maxView: 0,
            format:'hh:ii',
            todayBtn:  0,
            autoclose: true,
            todayHighlight: false,
            startView: 0,
            minute:5,
            minuteStep:10,
            startDate:new Date(startt),  //只显示一年的日期365天
            endDate : new Date(startt1)
        }
    ).on('click',function(e){
        $("#hasDatepicker2").datetimepicker("setStartDate", $("#hasDatepicker1").val());
    });
</script>

<script>
    $(function () {
         var flag="0";
        $("#waiquan div").on("click",function () {

            function p(s) {
                return s < 10 ? '0' + s: s;
            }

            var myDate = new Date();
            //获取当前年
            var year=myDate.getFullYear();
            //获取当前月
            var month=myDate.getMonth()+1;
            //获取当前日
            var date=myDate.getDate();
            var h=myDate.getHours();       //获取当前小时数(0-23)
            var m=myDate.getMinutes();     //获取当前分钟数(0-59)
            var s=myDate.getSeconds();
            var valStart =year+'-'+"05"+'-'+"01"+" "+"00"+':'+"00"+':'+"00";
            var valEnd =year+'-'+"10"+'-'+"01"+" "+"00"+':'+"00"+':'+"00";
            var newStart = new Date(valStart);
            var newEnd = new Date(valEnd);
            if(myDate < newStart || myDate >newEnd ){

                var startt=year+'-'+p(month)+"-"+p(date)+" "+"16"+':'+"00"+':'+"00";
                var startt1=year+'-'+p(month)+"-"+p(date)+" "+"20"+':'+"00"+':'+"00";
            }else {
                var startt=year+'-'+p(month)+"-"+p(date)+" "+"17"+':'+"00"+':'+"00";
                var startt1=year+'-'+p(month)+"-"+p(date)+" "+"21"+':'+"00"+':'+"00";
            }


            var userName=localStorage.getItem("key1")
            var time11=$("#hasDatepicker1").val();
            var time21=$("#hasDatepicker2").val();

            var  time1 = time11.replace(/-/g,"/");
            var date1 = new Date(time1 );
            var time2 = time21.replace(/-/g,"/");
            var date2 = new Date(time2 );
            var s1 = date1.getTime(),s2 = date2.getTime();
            var total = (s2 - s1)/1000;
            console.info(time1+time2);

            var bathIdtrim=$(this).text();
            var bathId=$.trim(bathIdtrim);
            var obj=$(this);

            if(flag=="1"){
                var dblChoseAlert = simpleAlert({
                    "content":"您已选择澡位请不要重新选择哟！",
                    "buttons":{
                        "确定":function () {

                            dblChoseAlert.close();
                            return;

                        },
                        "取消":function () {

                            dblChoseAlert.close();
                            return;

                        }
                    }
                })
                return;
            }else if(time11 < startt || time21 > startt1){

                var onlyChoseAlert = simpleAlert({
                    "content":"时间选择错误,当天(夏季:16:00-21:00,冬季：16:00-21:00)",
                    "buttons":{
                        "确定":function () {
                            onlyChoseAlert.close();
                            return;
                        }
                    }
                })
            }
            else if(total <= 0){
                var onlyChoseAlert = simpleAlert({
                    "content":"时间选择错误,结束时间应该小于开始时间",
                    "buttons":{
                        "确定":function () {
                            onlyChoseAlert.close();
                            return;
                        }
                    }
                })
                return;
            }else if(total/60 > 30){
                var onlyChoseAlert = simpleAlert({
                    "content":"选择时间过长哟！建议小于30分钟",
                    "buttons":{
                        "确定":function () {
                            onlyChoseAlert.close();
                            return;
                        }
                    }
                })
                return;
            }else {
                var dblChoseAlert = simpleAlert({
                    "content":"是否选择此澡位!",
                    "buttons":{
                        "确定":function () {
                            $.ajax({
                                type: "post",
                                url: "<%=basePath%>/admin/selectBath",
                                data: {"userName":userName,"bathId":bathId, "selectStartTime":time11,"selectEndTime":time21},
                                dataType: "json",
                                success: function(data){
                                    alert("回调成功");
                                    if(data.code == "F_00000"){
                                        if(data.msg == "bathTimeOut"){
                                            var onlyChoseAlert = simpleAlert({
                                                "content":"时间选择错误,结束时间应该小于开始时间",
                                                "buttons":{
                                                    "确定":function () {
                                                        onlyChoseAlert.close();
                                                        return;
                                                    }
                                                }
                                            })
                                        }
                                        else if(data.msg == "bath01"){
                                            alert("111");
                                            var onlyChoseAlert = simpleAlert({
                                                "content":"预订成功!",
                                                "buttons":{
                                                    "确定":function () {
                                                        flag="1"
                                                        obj.css({"background":"orange"});
                                                        onlyChoseAlert.close();

                                                    }
                                                }
                                            })

                                        }else  if(data.msg == "bath02"){
                                            var onlyChoseAlert = simpleAlert({
                                                "content":"此澡位已被预订请重新选择!",
                                                "buttons":{
                                                    "确定":function () {
                                                        onlyChoseAlert.close();

                                                    }
                                                }
                                            })

                                        }else{
                                            var onlyChoseAlert = simpleAlert({
                                                "content":"此澡位损坏或网络问题，请联系管理员!",
                                                "buttons":{
                                                    "确定":function () {
                                                        onlyChoseAlert.close();

                                                    }
                                                }
                                            })
                                        }
                                    }else{
                                        var onlyChoseAlert = simpleAlert({
                                            "content":"此澡位损坏或网络问题，请联系管理员!",
                                            "buttons":{
                                                "确定":function () {
                                                    onlyChoseAlert.close();
                                                }
                                            }
                                        })
                                    }

                                    /* alert("进来进来");
                                     alert(data.data);*/
                                    /* if(JSON.stringify(data)=="bath01"){
                                         alert("bath01");
                                     }*/

                                }
                            });
                            dblChoseAlert.close();
                        },
                        "取消":function () {
                            dblChoseAlert.close();
                        }
                    }
                })
            }





        })

    });
</script>



</body>
</html>
